<template>
    <Suspense>
        <template v-slot:default>
            <Store></Store>
        </template>
        <template v-slot:fallback>
            <SkeStore></SkeStore>
        </template>
    </Suspense>
    <Suspense>
        <template v-slot:default>
            <Banner></Banner>
        </template>
        <template v-slot:fallback>
            <SkeBanner></SkeBanner>
        </template>
    </Suspense>
    <view id="food" class="flex w-full" ref="food">
        <view class="w-1/4 width-25">
            <Suspense>
                <template v-slot:default>
                    <Kind></Kind>
                </template>
                <template v-slot:fallback>
                    <SkeKind></SkeKind>
                </template>
            </Suspense>
        </view>
        <view class="w-3/4 width-75 p2">
            <text class="block w-full h-10px text-sm pt-2 pb-4">{{ nowKind }}</text>
            <Suspense>
                <template v-slot:default>
                    <Goods :foodHeight="foodHeight" :foodBottom="foodBottom" @open="open"></Goods>
                </template>
                <template v-slot:fallback>
                    <SkeGoods></SkeGoods>
                </template>
            </Suspense>
        </view>
    </view>
</template>

<script setup lang="ts">
import SkeStore from '@/component/Skeleton/store.vue'
import SkeBanner from '@/component/Skeleton/banner.vue'
import SkeKind from '@/component/Skeleton/kind.vue'
import SkeGoods from '@/component/Skeleton/goods.vue'
import { Ref, ComponentInternalInstance } from 'vue';
const Store = defineAsyncComponent(() => import('@/component/store.vue'))
const Banner = defineAsyncComponent(() => import('@/component/banner.vue'))
const Kind = defineAsyncComponent(() => import('@/component/kind.vue'))
const Goods = defineAsyncComponent(() => import('@/component/goods.vue'))
const props = defineProps({
    nowKind: {
        type: String,
        default: ""
    }
})
const emits = defineEmits(['open'])
const open = (e: boolean) => {
    emits('open', e)
}
let num: number = 0
let windowHeight: Ref = ref<number>(num)
let foodHeight: Ref = ref<number>(num)
let foodBottom: Ref = ref<number>(num)
const instance: ComponentInternalInstance | null = getCurrentInstance()
onMounted((): void => {
    uni.getSystemInfo({
        complete(res): void {
            windowHeight.value = res.windowHeight
            let { $refs } = (getCurrentInstance() as any).proxy
            foodHeight.value = res.windowHeight - $refs.food.$el.offsetTop - 20
            foodBottom.value = res.windowBottom + 20
        }
    })
})
</script>

<style scoped>

</style>